<template>
	<view>

		<image src="../../static/image/page/hbgz-bg.png" class="hbgz-bg"></image>
		<image @click="viewImg" src="../../static/image/page/hd-ckhb-btn.png" class="hd-ckhb-btn"></image>
		<!-- 弹层 -->
		<view class="layer" v-if="redEnvelopeNum >= 0 && !isClose">
			<!-- 未拆状态 -->
			<view class="hb-bg" v-if="!isSplit">
				<image src="../../static/image/page/hb-bofer.png" class="hb-bofer"></image>
				<image @click="closeLayer" src="../../static/image/page/hb-close.png" class="hb-close"></image>
				<view class="hb-bofer-content">
					<view class="gx-text">恭喜您获得邀请专享红包</view>
					<view class="btn" @click="openRedEnvelope">拆开它</view>
					<view class="chbjh">您还有{{redEnvelopeNum}}次待拆开红包机会</view>
				</view>
			</view>
			<!-- 已拆状态 -->
			<view class="hb-bg" v-else>
				<image src="../../static/image/page/hb-after.png" class="hb-bofer"></image>
				<view class="hb-bofer-content">
					<view class="gx-text hb-after-text">恭喜您获得邀请专享红包</view>
					<view class="hb-text">
						<text class="amount">{{amount}}</text>
						<text class="yuan">元</text>
					</view>
					<view class="chbjh">已存入账户余额，可直接提现</view>
					<view class="btn" @click="shutDownOrTryAgain">{{redEnvelopeNum > 0?'再拆一次':'关闭'}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				redEnvelopeNum: 0, //红包次数
				isSplit: false, //是否拆包
				amount: 0, //红包金额
				isClose: true, //是否关闭弹层
			};
		},
		onLoad: function(options) {
			this.getRedEnvelope();
		},
		methods: {
			//查看图片
			viewImg() {
				this.$api.getActivityPoster().then(res => {
					let url = res.data.data;
					uni.previewImage({
						current: url, // 当前显示图片的http链接
						urls: [url], // 需要预览的图片http链接列表
						longPressActions: {
							itemList: ['保存图片'],
							success(data) {
								uni.saveImageToPhotosAlbum({
									filePath: url,
									success() {
										uni.showToast({
											icon: 'none',
											title: '保存相册成功',
											position: 'bottom'
										})
									}
								});
							}
						}
					})
				})
			},
			//关闭红包弹层
			closeLayer() {
				this.isClose = true;
				this.redEnvelopeNum = 0;
			},
			//关闭或者再来一次
			shutDownOrTryAgain() {
				if (this.redEnvelopeNum > 0) {
					//在拆一次
					this.openRedEnvelope();
				} else {
					//关闭弹层
					this.closeLayer();
				}
			},
			//拆红包
			openRedEnvelope() {

				this.$api.getRedEnvelopesMoney().then(res => {
					this.$amount = res.data.data;
					this.isSplit = true;
					this.redEnvelopeNum = --this.redEnvelopeNum;
				})
			},
			//获取红包次数
			getRedEnvelope() {
				this.$api.getRedEnvelopesTimes().then(res => {
					this.redEnvelopeNum = res.data.data;
					this.isClose = res.data.data > 0 ? false : true

				})
			},

		},
	}
</script>

<style lang="less">
	.hbgz-bg {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.layer {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: 99;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hb-bg {
		width: 468rpx;
		height: 616rpx;
		position: relative;
	}

	.hb-bofer {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.hb-close {
		width: 54rpx;
		height: 54rpx;
		position: absolute;
		top: -90rpx;
		right: 0;
	}

	.hb-bofer-content {
		position: relative;
		z-index: 99;
		width: 100%;
		height: 100%;
	}

	.gx-text {
		text-align: center;
		font-size: 24rpx;
		color: #FFEBAC;
		margin-top: 330rpx;
	}

	.btn {
		width: 378rpx;
		height: 68rpx;
		background: linear-gradient(180deg, #FCE9A8 0%, #FECD75 100%);
		box-shadow: 0px 16rpx 16rpx 0px rgba(159, 20, 63, 0.3), 0px 2rpx 6rpx 0rpx #FEF5D3;
		border-radius: 34rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #CB0908;
		text-align: center;
		line-height: 68rpx;
		margin: 70rpx auto 36rpx;
	}

	.chbjh {
		text-align: center;
		font-size: 20rpx;
		color: #FFEBAC;
	}

	.hb-after-text {
		margin-top: 140rpx;
	}

	.hb-text {
		text-align: center;
		margin-top: 70rpx;
	}

	.amount {
		font-size: 100rpx;
		font-weight: bold;
		color: #FFEBAC;
	}

	.yuan {
		font-size: 42rpx;
		color: #FFEBAC;
	}

	.hd-ckhb-btn {
		position: fixed;
		z-index: 9;
		top: 120rpx;
		right: 30rpx;
		width: 202rpx;
		height: 60rpx;
	}
</style>
